/*
 * @Description: 身份信息变更页面
 * @Author: yingying.fan
 * @Date: 2019-07-01 10:46:57
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-07-01 10:46:57
 */
<template>
  <div>
    <title-bar
      titleText="身份信息变更"
      :needBorder="true"
    >
    </title-bar>
    <div class="page-wrapper">
      <name-item ref="nameinput">
      </name-item>
      <id-item ref="idinput">
      </id-item>
      <button
        class="baseBgColorWithActive submit-btn"
        @click="submit"
      >提交</button>
      <p
        class="change-hint"
        v-html="changeHint"
      >
      </p>
      <div class="fontsize28 phone-service">
        电话客服：
        <span
          class="baseColorNoAcitve"
          @click="tel"
        >{{servicePhone}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getUrlParamByKey } from 'vue-xiaobu-utils'
import TitleBar from '@/components/titlebar/TitleBar'
import InfoNameInput from './components/infoinputitem/InfoNameInput'
import InfoIdInput from './components/infoinputitem/InfoIdInput'
import ConfirmBox from '@/components/confirm/ConfirmBox.js'
import { open, back } from '@/utils/JumpUtils.js'
import { updateApplyInfo } from './api/api.js'
export default {
  components: {
    'title-bar': TitleBar,
    'name-item': InfoNameInput,
    'id-item': InfoIdInput
  },
  data() {
    return {
      changeHint: '', // 更新信息的提示
      servicePhone: window.SERVICE_TEL, // 客服电话
      smsKey: '', // 上下文带来的验证码的key
      closeTimer: 0 // 自动返回的计时器
    }
  },
  mounted() {
    this.changeHint = '注：提交后将修改您的身份信息，一个账户只能开通一张' +
      window.buscardName +
      '，请修改为您本人的身份证号，以便为您提供绑定银行卡等服务。'
    this.smsKey = getUrlParamByKey('key')
  },
  destroyed() {
    this.closeTimer && clearTimeout(this.closeTimer)
  },
  methods: {
    // 提交更新身份信息
    submit() {
      // Promise.all([this.nameValid(), this.phoneValid()]).then(data => {
      Promise.all([this.$refs.nameinput.valid(), this.$refs.idinput.valid()]).then(data => {
        console.log('通过', data)
        updateApplyInfo(data[0], data[1], this.smsKey).then(body => {
          // 跳转到变更结果页，无返回键
          open('changeindentityresult.html?_bbv=false')
        }).catch(error => {
          console.log('错误：', error)
          if (!error.errCode) {
            let errCode = error.error.data.RSPCD + ''
            let errMsg = error.error.data.RSPMSG
            // let errCode = error.errCode
            // let errMsg = error.toastMsg
            switch (errCode) {
              case 'CARD100303': // 身份账号已被绑定
              case 'CARD100304': // 身份信息相同
                ConfirmBox.show({
                  title: '变更失败',
                  message: errMsg,
                  confirmText: '我知道了',
                  cancelText: null
                }).then(() => { })
                break
              case 'CARD100301': // 验证码错误
              case 'CARD100302': // 验证码过期
              case 'CARD100305': // 更新失败
                this.closeTimer = setTimeout(() => {
                  back()
                }, 5000)
                ConfirmBox.show({
                  title: '变更失败',
                  message: '抱歉，本次变更失败！5秒后自动返回添加银行卡页面！',
                  confirmText: '我知道了',
                  cancelText: null
                }).then(() => {
                  this.closeTimer && clearTimeout(this.closeTimer)
                  back()
                })
                break
              default:
                this.$toastMsg(errMsg)
                break
            }
          }
        })
      }).catch(error => {
        this.$toastMsg(error.message)
      })
    },
    tel() {
      window.location.href = 'tel:' + this.servicePhone
    }
  }
}
</script>

<style>
input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #999;
}
::-moz-placeholder {
  /* Firefox 19+ */
  color: #999;
}
:-ms-input-placeholder {
  /* IE 10+ */
  color: #999;
}
:-moz-placeholder {
  /* Firefox 18- */
  color: #999;
}
.page-wrapper {
  padding: 0 30px;
}
.submit-btn {
  width: 690px;
  height: 80px;
  border-radius: 10px;
  border: none;
  color: #ffffff;
  margin: 50px 0 0 0;
}
.change-hint {
  padding: 30px 0;
  color: #999999;
  font-size: 24px; /*px*/
  line-height: 1.4;
}
.phone-service {
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}
</style>
